<template>
    <div>
       <p style = "font-size:25px;">计数器  {{ counter }}</p>
       <button @click="counter++" style="font-size:25px;">点我</button><br/>
       kilometers: <input type="text" v-model="kilometers"><br/>
       meters: <input type="text" v-model="meters"><br/>
       <table>
        <tr>
         <th>序号</th>
         <th>商品名称</th>
         <th>商品价格</th>
         <th>购买数量</th>
         <th>操作</th>
        </tr>
        <tr v-for="(iphone, index) in Ip_Json" :key="index">
         <td>{{ iphone.id }}</td>
         <td>{{ iphone.name }}</td>
         <td>{{ iphone.price }}</td>
         <td>
           <button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button>
           {{ iphone.count }}
           <button v-on:click="iphone.count+=1">+</button>
         </td>
         <td>
           <button v-on:click="iphone.count=0">移除</button>
         </td>
        </tr>
       </table>
       总价: ${{totalPrice()}}
    </div>
</template>
<script>
export default {
  name: 'watch',
  data () {
    return {
      title: 'template watch',
      counter: 0,
      kilometers: 0,
      meters: 0,
      Ip_Json: [
        {
          id: 1,
          name: 'iphone 8',
          price: 5099,
          count: 1
        },
        {
          id: 2,
          name: 'iphone xs',
          price: 8699,
          count: 1
        },
        {
          id: 3,
          name: 'iphone xr',
          price: 6499,
          count: 1
        }
      ]
    }
  },
  methods: {
    totalPrice: function () {
      var totalP = 0
      for (var i = 0, len = this.Ip_Json.length; i < len; i++) {
        var iphone = this.Ip_Json[i]
        totalP += iphone.price * iphone.count
      }
      return totalP
    }
  },
  watch: {
    counter (curVal, oldVal) {
      console.log(curVal, oldVal)
    },
    kilometers (val) {
      this.kilometers = val
      this.meters = val * 1000
    },
    meters (val) {
      this.kilometers = val / 1000
      this.meters = val
    }
  }
}
</script>
